<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            position: relative;
            background-color: grey;
            margin: 0 auto;
            width: 1500px;
            height: 120px;
        }
        
        .search {
            position: absolute;
            top: 10px;
            left: 300px;
            border: 5px solid red;
            height: 60px;
            width: 900px;
        }
        
        .search input {
            float: left;
            border: none;
            outline: none;
            /* 最后两行定义边框和选中时边框线效果 */
            box-sizing: border-box;
        }
        
        .search input[type="text"] {
            width: 700px;
            height: 60px;
            padding-left: 20px;
        }
        
        .search input[type=submit] {
            width: 200px;
            height: 60px;
            background-color: red;
            color: white;
            font-size: 20px;
        }
        
        .keyword {
            position: absolute;
            top: 90px;
            left: 300px;
        }
        
        .keyword a {
            text-decoration: none;
            color: skyblue;
            padding: 0px 10px;
            font-size: 22px;
        }
        
        .buy_list_car {
            width: 200px;
            height: 80px;
            border: 3px solid black;
            float: right;
            margin: 20px 20px;
            box-sizing: border-box;
            text-align: center;
            line-height: 74px;
            background-color: pink;
            position: relative;
        }
        
        .buy_list_car img {
            vertical-align: middle;
            height: 50px;
            border-radius: 25px;
        }
        
        .buy_list_car a {
            text-decoration: none;
            font-size: 20px;
        }
        
        .count {
            position: absolute;
            top: -10px;
            left: 144px;
            height: 15px;
            line-height: 15px;
            background-color: red;
            padding: 4px 4px;
            border-radius: 7px 7px 7px 0px;
            /* 制作一个小角标 一个角是直角,其他三个是圆角*/
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="search">
            <input type="text" name="text_search" required="required" placeholder="嘤嘤嘤">
            <input type="submit" value="搜搜搜索">
            <!-- <button>搜索</button> -->
        </div>
        <div class="keyword">
            <a href="#">第一</a>
            <a href="#">第二</a>
            <a href="#">第三</a>
            <a href="#">第四</a>
            <a href="#">第五</a>
            <a href="#">第六</a>
        </div>
        <div class="buy_list_car">
            <img src="..//media_resourcing/cat_face.jpg" alt="Logo">
            <a href="#">
                我的购物车
            </a> >
            <i class="count">
                8
            </i>
        </div>
    </div>

</body>

</html>